<template>
  <div>
    <!-- 个人资料 -->
    <ul class="nav">
      <li
        style="color: #cc6633; font-size: 18px !important; margin: 0 5px 0 -5px"
        class="iconfont"
      >
        &#xe638;
      </li>
      个人资料
    </ul>
    <el-form
      style="margin-top: 10px"
      :label-position="labelPosition"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input
          style="width: 200px; margin-bottom: 20px"
          v-model="form.name"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          style="width: 200px; margin-bottom: 20px"
          v-model="form.phone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="QQ号码" prop="qq">
        <el-input
          style="width: 200px; margin-bottom: 20px"
          v-model="form.qq"
          placeholder="请输入QQ号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          style="width: 200px; margin-bottom: 20px"
          v-model="form.email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input
          resize="none"
          v-model="form.desc"
          placeholder="请输入详细地址"
          style="width: 400px; margin-bottom: 20px"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submit"
          style="
            padding: 10px 30px;
            color: white;
            border-radius: 10px;
            background: #cc6633;
          "
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      labelPosition: "right",
      form: {
        name: "",
        phone: "",
        qq: "",
        email: "",
        desc: "",
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
      rules: {
        // 定义验证规则
        name: [
          {
            min: 3,
            max: 10,
            message: " ",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            pattern: /^1[3-9]\d{9}$/,
            message: " ",
            trigger: ["blur", "change"],
          },
        ],
        email: [
          {
            type: "email",
            message: " ",
            trigger: ["blur", "change"],
          },
        ],
        qq: [
          { min: 6, max: 10, message: " ", trigger: "blur" },
          {
            pattern: /^[0-9]*$/,
            message: "qq格式验证失败",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      // 点击立即注册 准备提交表单
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("收集到的表单数据：", this.form);
        } else {
          console.warn("表单验证失败，请检查填写的内容");
        }
      });
    },

    // 头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped src="@/assets/scss/Order.scss"></style>
